import React from 'react';
import { Form, Button } from 'antd';
import FileUpload from '@/components/Custom/FileUpload/FileUpload';
import styles from './FileFormItem.less';

const fileTypeStr =
    'TXT,DOC,DOCX,XLS,XLSX,PPT,PPTX,PDF,EDC,SSP,DWG,EDCS,BMP,JPG,PNG,TIF,GIF,PCX,TGA,EXIF,FPX,SVG,PSD,CDR,PCD,DXF,UFO,EPS,AI,RAW,WMF,WEBP,Xmind,ZIP,rar,zip,CAB,ARJ,LZH,TAR,GZ,ACE,UUE,BZ2,JAR,ISO,rp';

/**
 *
 * @param {*} categoryCode attachmentList 工作管理附件  taskOperateFile 工作操作记录附件
 */
const FileFormItem = ({
    form,
    fieldName = 'files',
    label = '附件',
    categoryCode = 'taskOperateFile',
    rules = [],
    maxFileSize = 50,
    maxFileNum = 5
}) => {
    const { getFieldDecorator } = form;
    const [disabled, setDisabled] = React.useState(false);
    const handleFileUpload = file => {
        if (file.allFileList && file.allFileList.length >= maxFileNum) {
            setDisabled(true);
        } else {
            setDisabled(false);
        }
    };
    return (
        <Form.Item label={label}>
            <span className={styles.remarkTip}>
                (支持非运行文件格式，每个文件大小不超过{maxFileSize}M，最多上传{maxFileNum}个附件)
            </span>
            {getFieldDecorator(fieldName, {
                rules
            })(
                <FileUpload
                    onChange={handleFileUpload}
                    categoryCode={categoryCode}
                    checkFileSizeMsg={`文件大小不能超过${maxFileSize}MB！`}
                    checkFileSize={maxFileSize}
                    checkFileType={fileTypeStr}
                    checkFileTypeMsg="附件格式不合规，请确认！"
                >
                    <Button type="link" disabled={disabled} style={{ padding: '0' }}>
                        添加附件
                    </Button>
                </FileUpload>
            )}
        </Form.Item>
    );
};
export default FileFormItem;
